<template>
  <view class="container">
    <view class="avatar">
      <!-- 上传组件 -->
      <u-upload
        ref="product_img"
        name="product_img"
        :maxCount="6"
        :fileList="filelist"
        width="100"
        height="100"
        @delete="del"
        @afterRead="read"
      />
    </view>

    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="hirelist"
        :rules="rules"
        ref="product"
      >
        <!-- 门店 -->
        <u-form-item
          label="门店"
          prop="store"
          borderBottom
          @click="showstore = true"
        >
          <u-input
            v-model="hirelist.store.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择所属门店"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="商品分类" prop="store" borderBottom @click="showtype = true">
          <u-input v-model="hirelist.typename_text" disabled inputAlign="center" disabledColor="#ffffff"
            placeholder="请选择商品所属分类" border="none"></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        
       
        <!-- 品牌 -->
        <u-form-item
          label="品牌"
          prop="brank"
          borderBottom
          @click="showbrank = true"
        >
          <u-input
            v-model="hirelist.brank.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择品牌"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item
          label="推荐栏"
          borderBottom
          @click="showsellcolumn = true"
        >
          <u-input
            v-model="hirelist.sellcolumn_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择是否推荐"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
     
        <u-form-item
          label="系列"
          prop="brank"
          borderBottom
          @click="showbranktype = true"
        >
          <u-input
            v-model="hirelist.btypename_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择品牌系列"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="商品编码" prop="code">
          <u-input
            v-model="hirelist.code"
            ref="displacement"
            placeholder="请填写商品编码"
          />
        </u-form-item>
        <u-form-item label="品牌编号" prop="brankcode">
          <u-input
            v-model="hirelist.brankcode"
            ref="displacement"
            placeholder="请填写商品编码"
          />
        </u-form-item>
        <!-- 名称 -->
        <u-form-item label="名称" prop="name">
          <u-input
            v-model="hirelist.name"
            ref="name"
            placeholder="请输入商品名称"
          />
        </u-form-item>

        <u-form-item label="商品成分" prop="ingredients">
          <u-input
            v-model="hirelist.ingredients"
            ref="ingredients"
            placeholder="请填写排量"
          />
        </u-form-item>
     
        <u-form-item label="品牌颜色" prop="color">
          <u-input
            v-model="hirelist.color"
            ref="color"
            placeholder="请选择品牌颜色"
          />
        </u-form-item>
        <u-form-item label="商品库存" prop="stock">
          <u-input
            v-model="hirelist.stock"
            ref="color"
            placeholder="请选填写商品库存"
          />
        </u-form-item>

        <u-form-item label="商品属性" prop="prop">
          <u-input
            v-model="hirelist.prop"
            ref="prop"
            placeholder="请填写商品属性"
          />
        </u-form-item>
        <u-form-item label="商品长度" prop="prowidth">
          <u-input
            v-model="hirelist.prowidth"
            placeholder="请填写商品长度"
          />
        </u-form-item>

        <!-- 商品描述 -->
        <u-form-item label="描述" prop="content" borderBottom>
          <u-textarea
            placeholder="不低于3个字"
            v-model="hirelist.content"
            count
          ></u-textarea>
        </u-form-item>

        <u-form-item label="出售价" prop="price">
          <u-input
            
            v-model="hirelist.price"
            placeholder="请填写出售价"
          />
        </u-form-item>
        <u-form-item label="官方价" prop="offprice">
          <u--input
            
            v-model="hirelist.offprice"
            placeholder="请填写官方价格"
          />
        </u-form-item>

        <u-form-item label="待确认图片:">
          <u-upload
            ref="product_img"
            name="product_img"
            maxCount="2"
            :fileList="filelist1"
            width="100"
            height="100"
            @delete="delxsz"
            @afterRead="readxsz"
          />
        </u-form-item>
        <u-form-item label="视频上传:">
          <view class="vedio">
            <!-- 上传组件 -->
            <u-upload
              name="vedio"
              accept="video"
              :maxCount="1"
              :filelist="vediolist"
              width="100"
              height="100"
              @delete="delvedio"
              @afterRead="readvedio"
            />
          </view>
        </u-form-item>

        <u-action-sheet
          :show="showstore"
          :actions="stolist"
          title="请选所属的门店"
          @close="showstore = false"
          @select="storeSelect()"
        >
        </u-action-sheet>
     

        <u-action-sheet
          :show="showbrank"
          :height="'600px'"
          :actions="branklist"
          title="请选所属品牌"
          @close="showbrank = false"
          @select="brankSelect()"
        >
        </u-action-sheet>

        <u-action-sheet
          :show="showsellcolumn"
          :actions="sellcolumnlist"
          title="请选择是否为推荐"
          @close="showsellcolumn = false"
          @select="sellcolumnSelect()"
        />
        <u-action-sheet
          :show="showbranktype"
          :height="'600px'"
          :actions="branktypelist"
          title="请选所属品牌系列"
          @close="showbranktype = false"
          @select="branktypeSelect()"
        >
        </u-action-sheet>

        <u-action-sheet :show="showtype" :actions="protypedata" title="请选所属商品分类" @close="showtype = false"
          @select="protypeSelect()">
        </u-action-sheet>
      
        <!-- 提交按钮 -->
        <u-button
          text="添加商品"
          icon="pushpin"
          size="small"
          type="success"
          @click="product"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
  
<script>
export default {
  onLoad(options) {
    this.auth = this.$u.auth.check();

    this.stoid = this.auth.stoid

    this.ptypeid = options.ptypeid ? options.ptypeid : ""
    this.btypeid = options.btypeid ? options.btypeid : ""
    this.brand_id = options.brand_id ? options.brand_id : ""
    this.brank();

    this.storelist();
    this.getproducttype()
    this.branktypes()
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      protypedata: [],
      branktypelist: [],
      showbranktype:false,


      showsellcolumn:false,
      filelist: [],
      sellcolumnlist: [
        {
          sellcolumn: 0,
          name: "正常",
        },
        {
          sellcolumn: 1,
          name: "推荐",
        },
      ],
      showtype:false,
      showstore: false,
      auth: {},
      ptypeid: 0,
      btypeid: 0,
      brand_id: 0,
      vediolist: [],
      branklist: [],
      brank_text: "",
      piclist: [],
      vedio: "",
      imageslist: [],
      store_text: "",
      stolist: [],
      stoid: null,
      product_img: "",
      filelist1: [],
      piclist1: [],
      name: "",
      hirelist: {
        brank: {
          name: "",
        },
        store: {
          name: "",
        },
      },
      showbrank: false,
      registrationTime: "",
      commission: "",
      servicefree: 0,
      description: "",
      showCalendar: false,
      price: 0,


      rules: {
        code: {
          required: true,
          message: "请填写商品编号",
          trigger: ["blur", "change"],
        },
        brankcode: {
          required: true,
          message: "请填写品牌编码",
          trigger: ["blur", "change"],
        },
        name: {
          required: true,
          message: "请填写商品昵称",
          trigger: ["blur", "change"],
        },
        prowidth: {
          required: true,
          message: "请填写商品长度",
          trigger: ["blur", "change"],
        },
        stock: {
          required: true,
          message: "请填写商品库存",
          trigger: ["blur", "change"],
        },
        prop: {
          required: true,
          message: "请填写商品属性",
          trigger: ["blur", "change"],
        },
        color: {
          required: true,
          message: "请填写品牌颜色",
          trigger: ["blur", "change"],
        },
        content: {
          required: true,
          message: "请填写商品描述",
          trigger: ["blur", "change"],
        },
        price: {
          required: true,
          message: "请填写商品出售价格",
          trigger: ["blur", "change"],
        },
        offprice: {
          required: true,
          message: "请填写官方价格",
          trigger: ["blur", "change"],
        },
      },
    };
  },

  methods: {

    async branktypes() {
      let data = {
        adminid:this.auth.id,
        stoid:this.auth.stoid,
        brand_id: this.brand_id,
        ptypeid: this.ptypeid,
        btypeid: this.btypeid,
      }
      let result = await this.$u.api.hire.getbranktypedata(data);
      if (result.code) {
        this.branktypelist = result.data

        // 删除该数组中第一个元素
        // result.data.shift();
      }
    },
    protypeSelect(e) {
      this.hirelist.typename_text = e.name,
        this.hirelist.ptypeid = e.id;
    },

    async getproducttype() {
      let data = {
        adminid: this.auth.id,
      };

      let result = await this.$u.api.product.getprotypedata(data);

      if (result.code) {
        this.protypedata = result.data;
      }
    },
   
  
    del(e) {
      let list = this.filelist.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          this.filelist.splice(e.index, index);
          let data = {
            hireid: this.hireid,
            url: e.file.url,
          };

          var result = await this.$u.api.hire.delthumb(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1200,
              complete: () => {
                // 如果是最后一张图片就把其清空
                if ((e.index = 0 && index == 0)) {
                  this.filelist = [];
                }
                this.info();
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 1200,
            });
          }
        }
      });
    },
    delvedio() {
      this.vediolist = [];
    },
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
        formData: {
          proid: this.proid,
        },
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist = this.filelist.concat({ url: result.data });

        //修改本地存储中的图像内容
        this.product_img = result.data;

        let userArray = Object.entries(this.filelist).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 截取想要部分路径
          this.piclist.push(item.value.url);
        });

        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.product_img = qcarr.join(",");

      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    async readvedio(item) {
      //组装上传数据
      var data = {
        filePath: item.file.url,
        name: "vedio",
        header: {},
        formData: {
          proid: this.proid,
        },
      };

      //调用接口
      var result = await this.$u.api.hire.vedioupload(data);

      if (result.code) {
        this.vediolist = [{ url: result.data }];

        //修改本地存储中的图像内容
        this.vedio = result.data;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    delxsz(e) {
      let list = this.filelist1.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          this.filelist1.splice(e.index, index);
          let data = {
            hireid: this.hireid,
            url: e.file.url,
          };

          var result = await this.$u.api.hire.delxsz(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1200,
              complete: () => {
                // 如果是最后一张图片就把其清空
                if ((e.index = 0 && index == 0)) {
                  this.filelist1 = [];
                }
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 1200,
            });
          }
        }
      });
    },
    async readxsz(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist1 = this.filelist1.concat({ url: result.data });

        let userArray = Object.entries(this.filelist1).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 截取想要部分路径
          let str = item.value.url.slice(24, 200);

          // 把想要的路径追加到数组
          this.piclist1.push(str);
        });
        // 数组的去重
        let qcarr = [...new Set(this.piclist1)];

        // 数组转化成字符串
        this.hirelist.drivinglicense = qcarr.join(",");
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    sellcolumnSelect(e) {
      this.hirelist.sellcolumn_text = e.name;
      this.hirelist.sellcolumn = e.sellcolumn;
    },
    branktypeSelect(e) {
      this.hirelist.btypename_text = e.name;
      this.hirelist.btypeid = e.id;
    },
    brankSelect(e) {
      this.hirelist.brank.name = e.name;
      this.brand_id = e.id;
    },
    storeSelect(e) {
      this.hirelist.store.name = e.name;
      this.stoid = e.id;
    },
    product() {
      this.$refs.product
        .validate()
        .then(async () => {
          let data = {
            stoid: this.stoid,
            name: this.hirelist.name,
            offprice: this.hirelist.offprice,
            price: this.hirelist.price,
            prowidth:this.hirelist.prowidth,
            code: this.hirelist.code,
            sellcolumn: this.hirelist.sellcolumn,
            stock: this.hirelist.stock,
            ingredients: this.hirelist.ingredients,
            brankcode: this.hirelist.brankcode,
            color: this.hirelist.color,
            btypeid: this.hirelist.btypeid,
            ptypeid: this.hirelist.ptypeid,
            brand_id: this.brand_id,
            content: this.hirelist.content,
            prop: this.hirelist.prop,
            product_img: this.product_img,
            vedio: this.vedio,
          };

          // console.log(tjdata)

          let result = await this.$u.api.hire.add(data);

          if (result.code) {
            this.tjdata = [];
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.redirectTo({
                  url: "/pagesB/shop/bags/product/index",
                  params:{
                    ptypeid:this.ptypeid,
                    btypeid:this.btypeid,
                    brand_id:this.brand_id
                  }
                });
              },
            });
          } else {
            this.tjdata = [];
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
    async storelist() {
      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.product.storelist(data);

      if (result.code) {
        this.stolist = result.data;
      }
    },
    async brank() {
      let result = await this.$u.api.hire.branklist({
        adminid: this.auth.id,
        stoid: this.auth.stoid,
        ptypeid:this.ptypeid
      });

      if (result.code) {
        result.data.shift()
        this.branklist = result.data;
        
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
        });
      }
    },
  },
  computed: {
    btypename() {
      this.branktypelist.map((item)=>{
        if(item.id == this.btypeid)
        {
          this.hirelist.btypeid = item.id
          this.hirelist.btypename_text = item.name

       
        }
    })
  },
    brandname() {
      this.branklist.map((item)=>{
        if(item.id == this.brand_id)
        {
          this.hirelist.brand_id= item.id
          this.hirelist.brank.name = item.name

       
        }
    })
  },
    ptypename() {
      this.protypedata.map((item)=>{
        if(item.id == this.ptypeid)
        {
          this.hirelist.ptypeid = item.id
          this.hirelist.typename_text = item.name

       
        }
    })
  },
    storename() {
      this.stolist.map((item)=>{
        if(item.id == this.auth.stoid)
        {
          this.stoid = item.id
          this.hirelist.store.name = item.name

       
        }
    })
  },
  },
  watch:{
    btypeid(val) {
    this.hirelist.btypename_text =  this.btypename;
  },
    brand_id(val) {
    this.hirelist.brank.name =  this.btypename;
  },
    ptypeid(val) {
    this.hirelist.typename_text =  this.btypename;
  },
    stoid(val) {
    this.hirelist.store.name =  this.storename;
  },
  }
};
</script>
  
<style >
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.u-form-item__body__left__content__label.data-v-5e7216f1 {
  width: 75px;
}
</style>
  